tinymce.PluginManager.add('a-image', function (editor, url) {
  var pluginName='上传图片';
  function selectImage() {
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', '.png,.jpg,.jpeg');

    input.addEventListener('change', (e) => {
      const file = e.target.files[0];

      const reader = new FileReader();
      reader.addEventListener('load', () => {
        /*
          Note: Now we need to register the blob in TinyMCEs image blob
          registry. In the next release this part hopefully won't be
          necessary, as we are looking to handle it internally.
        */
        const id = 'blobid' + (new Date()).getTime();
        const blobCache = tinymce.activeEditor.editorUpload.blobCache;
        const base64 = reader.result.split(',')[1];
        const blobInfo = blobCache.create(id, file, base64);
        blobCache.add(blobInfo);

        /* call the callback and populate the Title field with the file name */
        editor.insertContent('<img src="' + blobInfo.blobUri() + '">');
        // cb(blobInfo.blobUri(), { title: file.name });
      });
      reader.readAsDataURL(file);
    });

    input.click();
  }

  // 注册一个菜单按钮
  editor.ui.registry.addSplitButton('a-image', {
    icon: 'image',
    tooltip: pluginName,
    onAction: selectImage,
    onItemAction: function (api, value) {
      console.log(api, value);
      if (value === 'upload-network-image') {
        if (editor.plugins.image) {
          tinymce.activeEditor.execCommand('mceImage');
        }
      }
    },
    fetch: (callback) => {
      const items = [
        {
          type: 'choiceitem',
          icon: 'upload',
          text: '上传网络图片',
          value: 'upload-network-image',
        }
      ];
      callback(items);
    }
  });

  return {
    getMetadata: function () {
      return {
        //插件名和链接会显示在“帮助”→“插件”→“已安装的插件”中
        name: "自定义图片上传插件",//插件名称
      };
    }
  };
});
